<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-08-02 15:59:18
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-06-01 14:39:21
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread" @click="kh">
        <span style="margin-left: 10px" :class="[cusShow == 1 ? 'active' : '']">
          客户
        </span>
      </div>
      <div class="bread" style="margin-left: 20px" @click="gh">
        <span style="margin-left: 10px" :class="[cusShow == 2 ? 'active' : '']">
          公海
        </span>
      </div>
      <div class="bread" style="margin-left: 20px" @click="qz">
        <span style="margin-left: 10px" :class="[cusShow == 3 ? 'active' : '']">
          潜在客户
        </span>
      </div>
      <div class="ipt">
        <el-input
          v-model="input"
          placeholder="请输入客户名称/手机号码"
          size="normal"
          clearable
          class="ipt-el"
        ></el-input>
        <el-button type="primary" size="default" @click="search">
          搜索
        </el-button>
      </div>
      <div class="btn">
        <div v-if="cusShow == 1">
          <el-button
            size="default"
            @click="addCustomer"
            style="margin-right: 10px; background-color: #ff6a00; color: #fff"
            v-hasPermi="['serviceProvide:customer:add']"
          >
            <span>+</span> 新建客户
          </el-button>
          <el-dropdown>
            <el-button class="el-icon-more"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="importCus"
                v-hasPermi="['serviceProvide:customer:import']"
              >
                导入
              </el-dropdown-item>
              <el-dropdown-item @click.native="getExl"> 导出 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-if="cusShow == 2" style="margin-right: 10px">
          <!-- <el-button
            type="primary"
            size="default"
            @click="receiveGh"
            v-hasPermi="['serviceProvide:customer:receive']"
          >
            领取
          </el-button>
          <el-button
            type="primary"
            size="default"
            @click="distributionCus"
            v-hasPermi="['serviceProvide:customer:distribution']"
            style="margin-right: 5px"
          >
            分配
          </el-button> -->
          <el-dropdown>
            <el-button class="el-icon-more"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="getExl"
                v-hasPermi="['serviceProvide:customer:exportAll']"
              >
                导出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-if="cusShow == 3" style="margin-right: 10px">
          <el-button
            type="primary"
            size="default"
            @click="unlock"
            style="margin-right: 5px"
            v-hasPermi="['serviceProvide:customer:unlock']"
          >
            解锁
          </el-button>
          <el-dropdown>
            <el-button class="el-icon-more"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="getExl"> 导出 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div v-if="chs == 1" class="sel">
      <span> 已选中 {{ multipleSelection.length }} 项</span>
      <el-button
        type="primary"
        size="default"
        @click="changeCharge"
        plain
        :disabled="disabled"
        v-hasPermi="['serviceProvide:customer:changeDirector']"
      >
        更换负责人
      </el-button>
      <el-button
        type="primary"
        size="default"
        @click="putGh"
        plain
        v-hasPermi="['serviceProvide:customer:putHighSeas']"
      >
        放入公海
      </el-button>
      <el-button
        type="primary"
        size="default"
        @click="changeStu"
        plain
        :disabled="disabled"
        v-hasPermi="['serviceProvide:customer:changeStatus']"
      >
        更换成交状态
      </el-button>
      <el-button
        type="primary"
        size="default"
        @click="importSel"
        plain
        v-hasPermi="['serviceProvide:customer:export']"
      >
        导出选中
      </el-button>
      <el-button type="primary" plain size="default" @click="addTeam">
        添加团队成员
      </el-button>
      <el-button
        type="danger"
        size="default"
        @click="del"
        plain
        v-hasPermi="['serviceProvide:customer:remove']"
      >
        删除
      </el-button>
    </div>
    <div v-else-if="chs == 2" class="sel">
      <span> 已选中 {{ multipleSelection.length }} 项</span>
      <el-button
        type="primary"
        size="default"
        @click="distributionCus"
        plain
        v-hasPermi="['serviceProvide:customer:distribution']"
      >
        分配
      </el-button>
      <el-button
        type="primary"
        size="default"
        @click="receiveGh"
        plain
        v-hasPermi="['serviceProvide:customer:receive']"
      >
        领取
      </el-button>
      <el-button
        type="primary"
        size="default"
        @click="importGh"
        plain
        v-hasPermi="['serviceProvide:customer:exportHighSeas']"
      >
        导出选中
      </el-button>
      <el-button
        type="danger"
        size="default"
        @click="delGh"
        plain
        v-hasPermi="['serviceProvide:customer:removeHighSeas']"
      >
        删除
      </el-button>
    </div>
    <div v-else-if="chs == 3" class="sel">
      <span> 已选中 {{ multipleSelection.length }} 项</span>
      <el-button
        type="primary"
        size="default"
        @click="unlock"
        plain
        v-hasPermi="['serviceProvide:customer:unlock']"
      >
        解锁
      </el-button>
      <el-button
        type="primary"
        size="default"
        @click="tranformCus"
        plain
        v-hasPermi="['serviceProvide:customer:transf']"
      >
        转化为客户
      </el-button>
    </div>
    <div class="chooise" v-else>
      <span>场景：</span>
      <el-select
        v-model="value"
        ref="sel"
        clearable
        @visible-change="(v) => visibleChange(v, 'sel', selClick, admClick)"
        class="sel-sence"
        @change="querySceneList"
        style="margin-right: 10px"
      >
        <el-option
          v-for="item in options"
          :key="item.sceneId"
          :label="item.name"
          :value="item.sceneId"
        >
        </el-option>
      </el-select>

      <el-button
        type="primary"
        icon="iconfont icon-shaixuan"
        size="default"
        @click="onScreen"
      >
        高级筛选
      </el-button>
    </div>
    <div v-if="scenArr !== []" class="scenF">
      <div v-for="(item, index) in scenArr" :key="index" class="scenF-content">
        <div class="scenF-detail" @click="scenSearch(item.sceneId)">
          {{ item.sceneList }}
          <i
            class="el-icon-circle-close"
            @click.stop="scenDel(index)"
            style="margin-left: 10px"
          ></i>
        </div>
      </div>
    </div>
    <div class="table" v-if="potential">
      <el-table
        :data="cusData"
        @selection-change="handleSelectionChange"
        :height="tableHight"
      >
        <template slot="empty" class="emptyBg">
          <img src="@/assets/images/empty.jpg" alt="" />
        </template>
        <el-table-column type="selection"></el-table-column>
        <template v-for="(item, index) in switchShow">
          <el-table-column
            :key="index"
            :label="item.label"
            v-if="showH(item, index)"
            :prop="item.stage"
            :width="item.width"
            :show-overflow-tooltip="true"
            fixed
          >
            <template slot-scope="scope">
              <span class="batch" @click="drawer(scope.row)">
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            :key="index"
            :label="item.label"
            :width="item.width"
            :prop="item.stage"
            v-show="item.value"
            v-if="item.label !== '客户名称' && item.value"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </template>
        <el-table-column fixed="right">
          <template slot="header">
            <i class="iconfont icon-shujupeizhi" @click.stop="tableShow"></i>
          </template>
        </el-table-column>
      </el-table>
      <div class="wuhu">
        <customer-sh
          :dialog="dialog"
          :switchShow="switchShow"
          v-if="dialog.dialogTableVisible"
          @submit="getSwitchList"
          class="sh"
        >
        </customer-sh>
      </div>
    </div>
    <el-table
      :data="cusData"
      :height="tableHight"
      @selection-change="handleSelectionChange"
      v-else
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="客户名称" prop="name"></el-table-column>
      <el-table-column label="手机号码" prop="phone"></el-table-column>
      <el-table-column label="地区" prop="regionName"></el-table-column>
      <el-table-column label="客户行业" prop="industryName"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
    </el-table>
    <div class="footer">
      <!-- 分页器 -->
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total,sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
    <screen
      :dialog="dialog"
      :switchShow="switchShow"
      :senceType="senceType"
      @sceneArr="sceneArr"
    ></screen>
    <cus-drawer
      :dialog="dialog"
      :cusShow="cusShow"
      :drawerData="drawerData"
      ref="cusDrawer"
      @updateCus="updateCus"
    ></cus-drawer>
    <gh-drawer
      :dialog="dialog"
      :cusShow="cusShow"
      :drawerData="drawerData"
      v-if="dialog.eject"
      @updateCus="updateCus"
    ></gh-drawer>
    <!-- 新建联系人 -->
    <el-dialog
      title="新建客户"
      :visible.sync="dialog.newCustomer"
      width="53%"
      @close="cusClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <div class="cusForm">
        <el-form
          :model="customerForm"
          ref="customerForm"
          :rules="customerRules"
          label-position="top"
          v-if="dialog.newCustomer"
        >
          <div class="basics">基础信息</div>
          <div class="basics-infomation">
            <el-form-item label="客户名称" prop="name">
              <el-input
                v-model="customerForm.name"
                placeholder="请输入客户名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="客户来源">
              <el-select
                v-model="customerForm.source"
                placeholder="请选择客户来源"
              >
                <el-option
                  v-for="(item, index) in sourceData"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="customerForm.phone"
                placeholder="请输入客户手机号"
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
            </el-form-item>
            <el-form-item label="客户级别">
              <el-select
                v-model="customerForm.level"
                placeholder="请选择客户级别"
              >
                <el-option
                  v-for="(item, index) in lvOptions"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="customerForm.remark"
                placeholder="请输入客户备注"
              ></el-input>
            </el-form-item>
            <el-form-item label="客户行业">
              <el-select
                v-model="customerForm.industry"
                placeholder="请选择客户行业"
              >
                <el-option
                  v-for="(item, index) in industryData"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="basics">地区信息</div>
          <div class="basics-infomation">
            <el-form-item label="地区">
              <el-cascader
                v-model="customerForm.regionId"
                :options="areaList"
                :props="defaultParams"
                @change="handChange"
                placeholder="请选择适用区域"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model="customerForm.address"
                placeholder="请输入客户地址"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="mainCustom">
          <div
            v-for="(item, index) in formList"
            :key="index"
            :class="item.type !== 18 ? 'mainCustomFive' : 'mainCustomOne'"
          >
            <div v-show="item.isHidden">
              <main-content
                :formList="item"
                class="main-con"
                ref="mainContent"
              ></main-content>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.newCustomer = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="dialog.editShow">
          保存
        </el-button>
        <el-button type="primary" @click="editSubmit" v-else>保存</el-button>
        <el-button @click="newSubmit" v-if="dialog.editShow"
          >保存并新建联系人</el-button
        >
        <el-button @click="oldSubmit" v-else>保存并新建联系人</el-button>
      </span>
    </el-dialog>
    <div class="importInfo">
      <el-dialog
        title="员工导入"
        :visible.sync="dialogImport"
        width="50%"
        custom-class="dialogClass"
        :close-on-click-modal="false"
      >
        <div class="module">
          <div class="module-txt">
            1.<span style="color: #1267fa">下载</span>信息模版，填写模版信息
          </div>
          <div class="module-img">
            <img src="@/assets/images/download.png" alt="" />
            <el-button round style="" @click="downloadTemplate">
              下载模板
            </el-button>
          </div>
        </div>
        <div class="dashed"></div>
        <div class="module">
          <div class="module-txt">
            2.<span style="color: #1267fa">上传</span>填写好的信息文件
          </div>
          <div class="module-img">
            <img src="@/assets/images/upload.png" alt="" />
            <el-upload
              class="upload-demo"
              ref="upload"
              action="#"
              :limit="1"
              accept=".xlsx"
              :http-request="httpRequest"
              :on-change="handleChangeFile"
            >
              <el-button class="taskBtn" round> 上传文件 </el-button>
            </el-upload>
            <el-button round @click="onSubmitInfo"> 确定上传 </el-button>
          </div>
        </div>
        <span slot="footer">
          <div>
            <span class="font-txt">
              注：
              导入会覆盖原有的信息，如需更新已存在的信息，请先导出通讯录，在导出表格里进行修改
            </span>
          </div>
        </span>
      </el-dialog>
      <el-dialog
        title="客户成交状态"
        :visible.sync="dialog.statusShow"
        @close="statusClose"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-select v-model="status" placeholder="请选择客户成交状态">
          <el-option
            v-for="(item, index) in statusData"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
        <span slot="footer">
          <el-button @click="dialog.statusShow = false">取消</el-button>
          <el-button type="primary" @click="statusSub">保存</el-button>
        </span>
      </el-dialog>
      <qz-screen
        :dialog="dialog"
        :switchShow="switchShow"
        @sceneArr="sceneArr"
      ></qz-screen>
      <!-- 更换负责人 -->
      <el-dialog
        title="更换负责人"
        :visible.sync="dialog.dialogPerCha"
        width="50%"
        @close="perClose"
        custom-class="dialogClass"
        :close-on-click-modal="false"
      >
        <charge-person
          v-if="dialog.dialogPerChaEject"
          ref="chaPer"
        ></charge-person>
        <span slot="footer">
          <el-button @click="dialog.dialogPerCha = false"> 取消 </el-button>
          <el-button type="primary" @click="onChangeChar"> 确定 </el-button>
        </span>
      </el-dialog>
    </div>
    <drag-table
      :dialog="dialog"
      :senceType="senceType"
      v-if="dialog.senceAdminEject"
      ref="dragTable"
    ></drag-table>
    <qz-drag
      :dialog="dialog"
      :senceType="senceType"
      v-if="dialog.qzSenceAdminEject"
      ref="qzDrag"
    ></qz-drag>
    <distribution
      :dialog="dialog"
      :chargeId="chargeId"
      v-if="dialog.distributionShowEject"
    ></distribution>
    <tips :dialog="dialog"></tips>
    <join-team
      :dialog="dialog"
      v-if="dialog.joinTeamShowEject"
      :drawerData="drawerData"
      :type="senceType"
      :entities='entities'
    ></join-team>
    <transfer
      :dialog="dialog"
      :drawerData="drawerData"
      :type="senceType"
      v-if="dialog.transferShowEject"
    ></transfer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getArea } from "@/api/signUp";
import { distriBution } from "@/api/registration";
import {
  selectCustomerList,
  selectHighSeasList,
  addCustomer,
  importInfoCus,
  importAllCus,
  exportTemplateCus,
  importSelectCus,
  delCus,
  putHighSeas,
  changeStatus,
  removeHighSeas,
  exportHighSeas,
  receive,
  selectPotentiaCustomerList,
  unlock,
  transf,
  queryScene,
  changeDirector,
  khEdit,
  distribution,
} from "@/api/CRM";
import screen from "./components/cusMan/screen.vue";
import customerSh from "./components/customerSh.vue";
import CusDrawer from "./components/cusDrawer.vue";
import QzScreen from "./components/cusMan/qzScreen.vue";
import GhDrawer from "./components/cusMan/ghDrawer.vue";
import DragTable from "./components/cusMan/dragTable.vue";
import QzDrag from "./components/cusMan/qzDrag.vue";
import Distribution from "./components/cusMan/distribution.vue";
import Tips from "@/components/tips/index.vue";
// 负责人
import chargePerson from "@/components/chargePerson";
import { getModuleByName, showCustomField } from "@/api/currency.js";
import mainContent from "@/components/mainContent/index.vue";
import joinTeam from "../../components/joinTeam/index.vue";
import Transfer from "../../components/joinTeam/transfer.vue";
import { isDelete } from "@/api/team";
export default {
  components: {
    screen,
    customerSh,
    CusDrawer,
    QzScreen,
    GhDrawer,
    DragTable,
    QzDrag,
    Distribution,
    Tips,
    chargePerson,
    mainContent,
    joinTeam,
    Transfer,
  },
  data() {
    return {
      entities:[],
      formList: [],
      tableHight: window.innerHeight - 330,
      scenArr: [],
      customerRules: {
        phone: [{ min: 11, max: 12, message: "请输入正确的 手机/座机 号码" }],
        name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
      },
      chargeId: "",
      chargeList: [], //负责人数组
      CdefaultParams: {
        label: "name",
        value: "sceneId",
        children: "sceneDataList",
        expandTrigger: "hover",
        checkStrictly: true,
      },
      disabled: false,
      dialogImport: false,
      defaultParams: {
        label: "name",
        value: "id",
        children: "children",
        expandTrigger: "hover",
      },
      customerForm: {
        name: "",
        source: "",
        phone: "",
        level: "",
        remark: "",
        industry: "",
        regionId: "",
        address: "",
        id: "",
        customField: null,
      },
      status: "",
      statusId: "", //成交状态id
      potential: true,
      dialog: {
        eject: false,
        dialogTableVisible: false,
        dialogScreenVisible: false,
        cusDrawer: false,
        GhDrawer: false,
        newCustomer: false,
        activity: true,
        qzScreenShow: false,
        dialogPerCha: false,
        dialogPerChaEject: false,
        editShow: true,
        statusShow: false, //客户成交状态
        distributionShow: false, //分配
        distributionShowEject: false,
        contactShow: false,
        senceAdmin: false,
        senceAdminEject: false,
        qzSenceAdmin: false,
        qzSenceAdminEject: false,
        isVipTip: false,
        csQrShow: false,
        joinTeamShowEject: false,
        joinTeamShow: false,
        editTeamShowEject: false,
        editTeamShow: false,
        transferShow: false,
        transferShowEject: false,
        customerShowEject: false,
        customerShow: false,
        contractShowEject: false,
        contractShow: false,
        customerContractShowEject: false,
        customerContractShow: false,
        newPlanShow: false,
        newPlanShowEject: false,
        XshkDialog: false,
        XshkDialogEject: false,
        newContactShow: false,
        newContactShowEject: false,
        OpportunityEject: false,
        OpportunityShow: false,
      },
      input: "", // 搜索
      value: "", //场景值
      arr: [],
      ids: [], //选中数组id集合
      charge: "", // 负责人
      chs: 0,
      cusShow: 1,
      type: 2, //导入导出携带值
      multipleSelection: [],
      lvOptions: [],
      options: [],
      // 控制表单的显示与隐藏
      switchShow: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      cusData: [],
      sourceData: [],
      industryData: [],
      areaList: [],
      drawerData: {},
      statusData: [],
      senceType: 9,
      sceneOptions: [],
    };
  },
  created() {
    this.kh();
    this.getAreaList();
    this.getDicts("customer_source").then((res) => {
      this.sourceData = res.data;
    });
    this.getDicts("customer_level").then((res) => {
      this.lvOptions = res.data;
    });
    this.getDicts("customer_industry").then((res) => {
      this.industryData = res.data;
    });
    this.getDicts("pay_status").then((res) => {
      this.statusData = res.data;
    });
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        if (this.senceType == 9) {
          this.kh();
        } else if (this.senceType === 10) {
          this.gh();
        } else {
          this.qz();
        }
      }
    },
  },
  mounted() {
    document.addEventListener("click", this.bodyCloseMenus);
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  beforeDestroy() {
    document.removeEventListener("click", this.bodyCloseMenus);
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  computed: {
    ...mapGetters(["isVip"]),
  },
  methods: {
    // 新增团队
    addTeam() {
      this.dialog.joinTeamShowEject = true;
      this.$nextTick(() => {
        this.dialog.joinTeamShow = true;
      });
    },
    // 编辑并保存
    oldSubmit() {
      this.$refs["cusDrawer"].contactForm.definition = this.customerForm.name;
      this.$refs["cusDrawer"].contactForm.crmId = this.customerForm.id;
      console.log(this.customerForm);
      this.editSubmit();
      this.$refs["cusDrawer"].newContact();
    },
    // 获取模块Id
    getModule() {
      getModuleByName({
        name: "客户",
      }).then((res) => {
        showCustomField({
          module: res.data,
          id: this.drawerData.id || null,
        }).then((res) => {
          console.log(res);
          res.data.map((item) => {
            if (item.type == 3 && item.choiceList == null) {
              item.choiceList = [];
              console.log(item);
            }
          });
          this.formList = res.data;
          console.log(this.formList);
        });
      });
    },
    perChaClose() {
      this.charge = "";
    },
    // 点击空白
    bodyCloseMenus(e) {
      let self = this;
      if (self.dialog.dialogTableVisible == true) {
        self.dialog.dialogTableVisible = false;
      }
    },
    // 点击临时搜索
    scenSearch(id) {
      if (this.senceType == 9) {
        this.getList(id);
      } else if (this.senceType === 10) {
        this.getGhList(id);
      } else {
        this.getselectPotentia(id);
      }
    },
    // 删除临时搜索
    scenDel(i) {
      this.scenArr.splice(i, 1);
      if (this.scenArr.length == 0) {
        if (this.senceType == 9) {
          this.getList();
        } else if (this.senceType === 10) {
          this.getGhList();
        } else {
          this.getselectPotentia();
        }
      }
    },
    // 获取数组
    sceneArr(data) {
      this.scenArr.push(data);
    },
    querySceneList() {
      if (this.senceType == 9) {
        this.getList(this.value);
      } else if (this.senceType === 10) {
        this.getGhList(this.value);
      } else {
        this.getselectPotentia(this.value);
      }
    },
    //管理
    admClick() {
      this.dialog.senceAdminEject = true;
      this.$nextTick(function () {
        this.dialog.senceAdmin = true;
      });
    },
    //新建场景
    selClick() {
      this.onScreen();
    },
    // 场景下拉框按钮
    visibleChange(visible, refName, onClick, onClick2) {
      if (visible) {
        const ref = this.$refs[refName];
        let popper = ref.$refs.popper;
        if (popper.$el) popper = popper.$el;
        if (
          !Array.from(popper.children).some(
            (v) => v.className === "el-cascader-menu__list"
          )
        ) {
          const el = document.createElement("ul");
          el.className = "el-cascader-menu__list";
          el.style =
            "border-top: solid 1px #E4E7ED; padding:0; color: #606266;";
          el.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>新建场景</span>
                            </li>
                        `;
          const el2 = document.createElement("ul");
          el2.className = "el-cascader-menu__list";
          el2.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>管理</span>
                            </li>
                        `;
          popper.appendChild(el);
          popper.appendChild(el2);
          el2.onclick = () => {
            onClick2 && onClick2();
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
          el.onclick = () => {
            // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
            onClick && onClick();
            // 以下代码实现点击后弹层隐藏 不需要可以删掉
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
        }
      }
    },
    // 导入员工
    handleChangeFile(file) {
      var fd = new FormData();
      fd.append("file", file.raw);
      fd.append("type", this.type);
      importInfoCus(fd).then((res) => {
        this.$message.success(res.msg);
        if (this.type == 2) {
          this.kh();
        } else if (this.type == 3) {
          this.gh();
        } else {
          this.qz();
        }
        this.dialogImport = false;
      });
    },
    // 保存并新建
    newSubmit() {
      this.customerForm.customField = JSON.stringify(this.formList);
      this.$refs.customerForm.validate((valid) => {
        if (!valid) return this.$message.error("请输入必填项");
        addCustomer(this.customerForm).then((res) => {
          console.log(res);
          this.$message.success(res.msg);
          console.log(this.$refs);
          this.$refs["cusDrawer"].newContact();
          this.dialog.contactShow = true;
          this.$refs.cusDrawer.contactForm.definition = this.customerForm.name;
          this.$refs.cusDrawer.contactForm.crmId = res.data;
          this.kh();
          this.dialog.newCustomer = false;
        });
      });
    },
    // 打开分配
    distributionCus() {
      this.dialog.distributionShowEject = true;
      this.$nextTick(function () {
        this.dialog.distributionShow = true;
      });
    },
    // 搜索
    search() {
      if (this.senceType == 9) {
        this.kh();
      } else if (this.senceType === 10) {
        this.gh();
      } else {
        this.qz();
      }
    },
    // 关闭负责人
    chargeClose() {
      this.charge = "";
    },
    // 关闭成交状态
    statusClose() {
      this.status = "";
    },
    // 关闭新建客户
    cusClose() {
      this.customerForm.name = "";
      this.customerForm.source = "";
      this.customerForm.phone = "";
      this.customerForm.level = "";
      this.customerForm.remark = "";
      this.customerForm.industry = "";
      this.customerForm.regionId = "";
      this.customerForm.address = "";
      this.customerForm.id = "";
      this.dialog.editShow = true;
    },
    // 修改
    editSubmit() {
      this.customerForm.customField = JSON.stringify(this.formList);
      this.$refs.customerForm.validate((valid) => {
        if (!valid) return this.$message.error("请输入必填项");
        khEdit(this.customerForm).then((res) => {
          console.log(res);
          this.$message.success(res.msg);
          this.dialog.newCustomer = false;
          this.dialog.editShow = true;
          this.kh();
        });
      });
    },
    // 客户编辑
    updateCus(val) {
      console.log(val);
      this.customerForm.name = val.name;
      this.customerForm.source = val.source;
      this.customerForm.phone = val.phone;
      this.customerForm.level = val.level;
      this.customerForm.remark = val.remark;
      this.customerForm.industry = val.industry;
      this.customerForm.regionId = val.regionId;
      this.customerForm.address = val.address;
      this.customerForm.id = this.drawerData.id;
    },
    onChangeChar() {
      if (this.charge == "") return this.$message.error("请选择负责人");
      changeDirector({
        ids: this.chargeId,
        userId: this.charge,
      }).then((res) => {
        this.$message.success(res.msg);
        this.dialog.dialogPerCha = false;
        if (this.senceType == 9) {
          this.kh();
        } else if (this.senceType == 10) {
          this.gh();
        } else {
          this.qz();
        }
      });
    },
    // 关闭更换负责人
    perClose() {
      this.charge = "";
      this.dialog.dialogPerChaEject = false;
    },
    // 更换负责人
    changeCharge() {
      this.dialog.transferShowEject = true;
      this.$nextTick(function () {
        this.dialog.transferShow = true;
      });
    },
    handleChange(val) {
      if (this.senceType == 9) {
        this.kh();
      } else if (this.senceType == 10) {
        this.gh();
      } else {
        this.qz();
      }
    },
    // 查询高级筛选
    getScene() {
      queryScene({ type: this.senceType }).then((res) => {
        if (res.default !== null) {
          res.scenes.unshift(res.default);
          this.options = res.scenes;
        } else {
          this.options = res.scenes;
        }
      });
    },
    // 转换成客户
    tranformCus() {
      transf(this.ids).then((res) => {
        this.$message.success(res.msg);
        this.qz();
      });
    },
    // 解锁
    unlock() {
      unlock(this.ids).then((res) => {
        this.$message.success(res.msg);
        this.qz();
      });
    },
    // 获取潜在客户列表
    getselectPotentia(val) {
      selectPotentiaCustomerList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        sceneId: val,
        identification: this.input,
      }).then((res) => {
        this.cusData = res.rows;
        this.total = res.total;
      });
    },
    // 领取
    receiveGh() {
      receive(this.ids).then((res) => {
        this.$message.success(res.msg);
        this.gh();
      });
    },
    // 公海导出选中
    importGh() {
      exportHighSeas(this.ids).then((res) => {
        this.download(res.msg);
      });
    },
    // 公海删除
    async delGh() {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该线索, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        removeHighSeas(this.ids).then((res) => {
          this.$message.success(res.msg);
          if (this.cusData.length == 0 && this.pageNum > 1) {
            this.pageNum--;
          }
          this.gh();
        });
      }
    },
    // 确定更改状态
    statusSub() {
      changeStatus({
        id: this.statusId,
        status: this.status,
      }).then((res) => {
        this.$message.success(res.msg);
        this.status = "";
        this.kh();
        this.dialog.statusShow = false;
      });
    },
    // 更改成交状态dialog打开
    changeStu() {
      this.dialog.statusShow = true;
    },
    // 放入公海
    putGh() {
      let ids = [];
      this.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      putHighSeas(ids).then((res) => {
        this.$message.success(res.msg);
        this.kh();
      });
    },
    // 删除客户
    async del() {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该线索, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        let userIds = [];
        this.multipleSelection.forEach((item) => {
          userIds.push(item.userId);
        });
        isDelete(userIds).then((res) => {
          if (res.data == true) {
            delCus(this.ids).then((res) => {
              if (res.code == 501) return this.$message.info(res.msg);
              if (res.code == 502) return this.$message.info(res.msg);
              this.$message.success(res.msg);
              if (this.cusData.length == 0 && this.pageNum > 1) {
                this.pageNum--;
              }
              this.kh();
            });
          } else {
            this.$message.error("请联系负责人进行删除！");
          }
        });
      }
    },
    //导出选中
    importSel() {
      let ids = [];
      this.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      importSelectCus(ids).then((res) => {
        this.download(res.msg);
      });
    },
    importCus() {
      this.dialogImport = true;
    },
    /** 导出按钮操作 */
    async getExl() {
      const confirmResult = await this.$confirm(
        "是否确认导出所有角色数据项?",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消导出!");
      } else {
        importAllCus({
          type: this.type,
        }).then((res) => {
          this.download(res.msg);
        });
      }
    },
    //下载模版
    downloadTemplate() {
      exportTemplateCus().then((response) => {
        this.download(response.msg);
      });
    },
    onSubmit() {
      this.customerForm.customField = JSON.stringify(this.formList);
      this.$refs.customerForm.validate((valid) => {
        if (!valid) return this.$message.error("请输入必填项");
        addCustomer(this.customerForm).then((res) => {
          this.$message.success(res.msg);
          this.kh();
          this.dialog.newCustomer = false;
        });
      });
    },
    // 上传客户表格
    onSubmitInfo() {},
    // 获取所有地区
    getAreaList() {
      getArea().then((res) => {
        let data = res.data;
        this.areaList = this.getTreeData(data);
      });
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    handChange(e) {
      this.customerForm.regionId = e[1];
    },
    getGhList(val) {
      selectHighSeasList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        sceneId: val,
        identification: this.input,
      }).then((res) => {
        this.cusData = res.rows;
        this.total = res.total;
      });
    },
    // 列表查询
    getList(val) {
      selectCustomerList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        sceneId: val,
        identification: this.input,
      }).then((res) => {
        this.cusData = res.rows;
        this.total = res.total;
      });
    },
    addCustomer() {
      this.$store.dispatch("isVip");
      if (this.isVip) {
        this.dialog.newCustomer = true;
        this.getModule();
      } else {
        this.dialog.isVipTip = true;
      }
    },
    kh() {
      this.scenArr = [];
      this.cusShow = 1;
      this.type = 2;
      this.senceType = 9;
      this.multipleSelection = [];
      this.potential = true;
      this.switchShow = [
        {
          value: true,
          label: "客户名称",
          stage: "name",
        },
        {
          value: true,
          label: "线索来源",
          stage: "sourceName",
        },
        { value: true, label: "手机号码", stage: "phone", width: "150" },
        {
          value: true,
          label: "客户行业",
          stage: "industryName",
        },
        {
          value: true,
          label: "客户级别",
          stage: "levelName",
        },
        {
          value: true,
          label: "备注",
          stage: "remark",
        },
        {
          value: true,
          label: "地址",
          stage: "address",
        },
        {
          value: true,
          label: "成交状态",
          stage: "statusName",
        },
        {
          value: true,
          label: "更新时间",
          stage: "updateTime",
          width: "120",
        },
        {
          value: true,
          label: "负责人",
          stage: "directorName",
          width: "120",
        },
        {
          value: true,
          label: "创建人",
          stage: "createBy",
          width: "120",
        },
        {
          value: true,
          label: "创建时间",
          stage: "createTime",
          width: "120",
        },
      ];
      this.getList();
      this.getScene();
    },
    gh() {
      this.scenArr = [];
      this.cusShow = 2;
      this.type = 3;
      this.multipleSelection = [];
      this.potential = true;
      this.switchShow = [
        {
          value: true,
          label: "客户名称",
          stage: "name",
        },
        {
          value: true,
          label: "线索来源",
          stage: "sourceName",
        },
        { value: true, label: "手机号码", stage: "phone", width: "140" },
        {
          value: true,
          label: "客户行业",
          stage: "industryName",
        },
        {
          value: true,
          label: "客户级别",
          stage: "levelName",
        },

        {
          value: true,
          label: "备注",
          stage: "remark",
        },
        {
          value: true,
          label: "地址",
          stage: "address",
        },
        {
          value: true,
          label: "成交状态",
          stage: "statusName",
        },
        {
          value: true,
          label: "更新时间",
          stage: "updateTime",
          width: "120",
        },
        {
          value: true,
          label: "负责人",
          stage: "directorName",
          width: "120",
        },
        {
          value: true,
          label: "创建人",
          stage: "createBy",
          width: "120",
        },
        {
          value: true,
          label: "创建时间",
          stage: "createTime",
          width: "120",
        },
      ];
      this.getGhList();
      this.senceType = 10;
      this.getScene();
    },
    qz() {
      this.scenArr = [];
      this.multipleSelection = [];
      this.chs = 0;
      this.switchShow = [
        { value: true, label: "客户名称", stage: "name" },
        { value: true, label: "手机号码", stage: "phone" },
        { value: true, label: "地区", stage: "regionName" },
        { value: true, label: "客户行业", stage: "industryName" },
        { value: true, label: "备注", stage: "remark" },
      ];
      this.cusShow = 3;
      this.type = 4;
      this.potential = false;
      this.getselectPotentia();
      this.senceType = 11;
      this.getScene();
    },
    onScreen() {
      if (this.senceType == 11) {
        this.dialog.qzScreenShow = true;
      } else {
        this.dialog.dialogScreenVisible = true;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      if (this.senceType == 9) {
        this.getList();
      } else if (this.senceType == 10) {
        this.getGhList();
      } else {
        this.getselectPotentia();
      }
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.senceType == 9) {
        this.getList();
      } else if (this.senceType == 10) {
        this.getGhList();
      } else {
        this.getselectPotentia();
      }
    },
    tableShow() {
      if (this.dialog.dialogTableVisible == false) {
        this.dialog.dialogTableVisible = true;
      } else {
        this.dialog.dialogTableVisible = false;
      }
    },
    getSwitchList(list) {
      this.$set(this, "switchShow", list);
    },
    showH(item, index) {
      let bole = false;
      if (item.label === "客户名称") {
        bole = true;
      }
      if (!item.value) bole = false;
      return bole;
    },
    updataSubmit(data) {
      this.switchShow = data;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      let Ids = [];
      this.entities = [];
      this.multipleSelection = val;
      if (val.length !== 0) {
        this.statusId = val[0].id;
        this.chargeId = val[0].id;
        this.drawerData = val[0];
        val.forEach((item) => {
          this.entities.push(item.id);
        });
      }

      if (val.length !== 0 && this.cusShow == 1) {
        this.chs = 1;
      } else if (val.length !== 0 && this.cusShow == 2) {
        this.chs = 2;
      } else if (val.length !== 0 && this.cusShow == 3) {
        this.chs = 3;
      } else {
        this.chs = 0;
      }
      if (val.length > 1) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
      this.multipleSelection.forEach((item) => {
        Ids.push(item.id);
      });
      this.ids = Ids;
    },
    httpRequest(data) {},
    drawer(row) {
      if (this.senceType == 9) {
        console.log(this.senceType);
        this.dialog.eject = true;
        this.$nextTick(function () {
          this.dialog.cusDrawer = true;
        });
      } else {
        this.dialog.eject = true;
        this.$nextTick(function () {
          this.dialog.ghDrawer = true;
        });
      }
      this.drawerData = row;
      this.statusId = row.id;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
  .bread {
    font-size: 16Px;
    font-weight: 500;
    margin-top: 20px;
    margin-left: 5px;
    height: 30px;
    display: flex;
    vertical-align: middle;
    line-height: 30px;
    i {
      font-size: 30px;
      color: #bdbdbd;
    }
    p {
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }

  .ipt {
    margin: auto;
    margin-top: 16px;
    width: 350px;
    transform: translateX(-20%);
    /deep/ .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
    .el-button--primary {
      border-radius: 0 4px 4px 0;
    }
  }
}
.chooise {
  margin-top: 20px;
  .sel {
    margin: 0 14px;
  }
  .el-button {
    font-size: 14px;
    /deep/ span {
      margin-left: 5px;
    }
  }
}
.active {
  color: #1172fb !important;
}
.active1 {
  color: #ff8e43 !important;
}
.sel {
  margin-top: 20px;
  span {
    margin-right: 40px;
  }
}
.footer {
  height: 30px;
  .el-pagination {
    margin-top: 10px;
  }
  /deep/.btn-prev {
    width: 80px;
    height: 40px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #d3dbeb;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #d3dbeb;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/.number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #8f9bb3;
  }
  /deep/ .btn-quicknext {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #8f9bb3;
  }
  /deep/ .btn-quickprev {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #8f9bb3;
  }
  /deep/ .el-pagination__total {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2b2b2b;
    line-height: 24px;
    margin-top: 8px;
  }
  /deep/ .el-pagination__jump {
    margin-top: 6px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2b2b2b;
    line-height: 14px;
  }
}
.batch {
  color: #1267fa;
}
.btn {
  display: flex;
  margin-top: 15px;
}
.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.basics-infomation {
  display: flex;
  flex-wrap: wrap;
  /deep/ .el-form-item {
    width: 50%;
    .el-input__inner {
      width: 330px;
    }
    .el-textarea__inner {
      width: 330px;
    }
  }
}

.table {
  position: relative;
  .wuhu {
    position: absolute;
    top: 45px;
    right: 0px;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ececec;
  }
}
.importInfo {
  /deep/ .el-dialog__body {
    display: flex;
    justify-content: space-around;
    .module {
      width: 40%;
      height: 300px;
      .module-img {
        width: 49px;
        height: 60px;
        margin: 50%;
        transform: translate(-50%, -50%);
        img {
          width: 100%;
          height: 100%;
        }
        .el-button {
          margin-top: 10px;
          transform: translateX(-25%);
        }
      }
      /deep/.el-dialog__footer {
        text-align: left;
      }
      .module-txt {
        transform: translateY(400%);
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1f2e4d;
      }
    }
  }
  .dashed {
    width: 1px;
    height: 180px;
    border-left: 2px dashed rgba(0, 0, 0, 0.1);
    transform: translateY(35%);
  }
  /deep/.el-upload-list {
    display: none;
  }
}
.ipt-el {
  width: 240px;
}
.scenF {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .scenF-content {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .scenF-detail {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      border: 1px solid #9aa1af;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .el-icon-circle-close {
        transform: translateY(3px);
      }
    }
  }
}
.mainCustom {
  display: flex;
  flex-wrap: wrap;
  .mainCustomFive {
    width: 50%;
  }
  .mainCustomOne {
    width: 100%;
  }
}
/deep/.dialogClass {
  .el-dialog__body {
    height: 720px;
    overflow: auto;
  }
}
</style>
